<template>
	<view class="page-144">
		<view class="image-top">
			<image src="/static/clb/144/top.png" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="form-container">
			<uni-forms class="login-form" :model="formData">
				<uni-forms-item class="input-phone">
					<input
						placeholder="请输入手机号"
						type="tel"
						maxlength="11"
						style="font-size: 36rpx"
						v-model="formData.mobile"
						class="uni-input-input"
						placeholder-style="color: #969696"
					/>
				</uni-forms-item>
			
				<view class="login-btn" style="text-align: center">
					<image src="/static/clb/144/comfirm.png" mode="" style="width: 535rpx; height: 155rpx" @click="confirmOrderBtn"></image>
				</view>

				<view style="margin-top: 40rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; align-items: center; justify-content: center">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="formData.allChecked" style="transform: scale(0.7)" />
							<text style="color: #fdfdfd; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #fad80e; font-weight: 400; font-size: 28rpx" @click="privatePro(144)">《活动规则》</text>
					<text style="color: #fad80e; font-weight: 400; font-size: 28rpx" @click="privatePro(1)">《隐私条款》</text>
				</view>
			</uni-forms>
		</view>
		<view class="image-bottom">
			<image src="/static/clb/144/bottom.png" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<!-- 二次确认页面 -->
		<uni-popup ref="twoSure" type="bottom" border-radius="10px 10px 0 0">
			<view class="confirm">
				<view class="dialog-con-1">
					<view class="send-code">
						<input
							style="width: 350rpx"
							type="tel"
							adjust-position="false"
							maxlength="6"
							v-model="formData.smsCode"
							placeholder="请输入验证码"
							class="uni-input-input"
							placeholder-style="color: #818181"
						/>
						<view class="code-line"></view>
						<view class="code" @click="sendCode">获取验证码</view>
					</view>
					<image src="/static/clb/144/detail.png" style="width: 660rpx" mode="widthFix"></image>
				</view>

				<view class="btn-con">
					<view class="btn-cancel">
						<image src="/static/clb/144/cancel.png" style="width: 300rpx" mode="widthFix" @click="cancel"></image>
					</view>
					<view class="btn-ok">
						<image src="/static/clb/144/btnTwo.png" style="width: 300rpx" mode="widthFix" @click="twoConfirmOrder"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="successRef" type="bottom" border-radius="10px 10px 0 0">
			<view class="successConfirm">
				<view class="close-icon" style="display: flex; justify-content: flex-end" @click="successClose">
					<image src="/static/clb/144/successClose.png" style="width: 60rpx" mode="widthFix"></image>
				</view>
				<view class="dialog-con">
					<image src="/static/clb/144/successOk.png" style="width: 660rpx" mode="widthFix"></image>
				</view>

				<view class="success-btn-con">
					<view class="btn-cancel" style="display: flex; justify-content: center; margin-top: 100rpx">
						<image src="/static/clb/144/successBtnClose.png" style="width: 280rpx; height: 90rpx" mode="widthFix" @click="successClose"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="formData.agreeType" @ok="ok1"></per-info>
		</uni-popup>
	</view>
</template>

<script setup>
// 现在直接就是组合式api 来操作
import { reactive, ref, onMounted, watchEffect, watch, nextTick } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/store/counter.js';
import useSendCode from '@/comApi/sendCode.js';
import useConfirmOrder from '@/comApi/confirmOrder';
/* dialog */
const popupPro = ref();
const twoSure = ref();
const successRef = ref();
/* 表单 */
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: '',
	allChecked: false,
	agreeType: 1
});
const { sendCode, isSend, isTimer, isNum } = useSendCode(formData);
const { confirmOrder } = useConfirmOrder(formData);
const { formatPhone } = storeToRefs(useCounterStore());

// 二次确认页面
const cancel = () => {
	twoSure.value.close();
};

const twoConfirmOrder = async () => {
	// const res = confirmOrder();
	// if (res.code == 20000) {
	cancel();
	nextTick(() => {
		successRef.value.open('center');
	});

	// }
	return uni.utils.toast('订购成功');
};
const successClose = () => {
	successRef.value.close();
};
const confirmOrderBtn = async () => {
	// 二次确认
	const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
	if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
	if (!formData.mobile) return uni.utils.toast('请输入手机号');
	// if (!formData.smsCode) return uni.utils.toast('请输入验证码');
	if (!formData.allChecked) return uni.utils.toast('请勾选《活动规则》《隐私协议》');
	// 弹开
	twoSure.value.open('center');
};
onLoad((query) => {
	if (!query.a || !query.p) {
		uni.reLaunch({
			url: '/pages/clb/404'
		});
	}

	formData.channelCode = query.a;
	formData.productCode = query.p;
});

const ok1 = () => {
	popupPro.value.close();
	formData.allChecked = true;
};
const privatePro = (type) => {
	formData.agreeType = type;
	popupPro.value.open('center');
};
const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		formData.allChecked = true;
	} else {
		formData.allChecked = false;
	}
};
</script>

<style lang="scss" scoped>
.successConfirm {
}
.confirm {
		.dialog-con-1 {
			position: relative;
			.send-code {
				position: absolute;
				width: 530rpx;
				height: 60rpx;
				top: 240rpx;
				z-index: 100;
				display: flex;
				border: 2rpx solid #fe374f;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 100rpx;
				.uni-input-input {
					width: 320rpx !important;
					margin-left: 40rpx;
				}
				.code-line {
					height: 30rpx;
					width: 2rpx;
					border-left: 2rpx #7a7a7a solid;
					margin-top: 15rpx;
					margin-right: 6rpx;
				}
				.code {
					line-height: 60rpx;
					margin-left: 10rpx;
					height: 60rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 24rpx;
					color: #DC0101;
				}
			}
		
	}
	.btn-con {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
}
.page-144 {
	width: 750rpx;
	margin: 0 auto;
	background-color: #dc3825;
	box-sizing: border-box;
	overflow-x: hidden;
}
.form-container {
	margin: 0 auto;
	height: 380rpx;
	margin-top: 70rpx;
	width: 750rpx;
	.login-btn {
		margin-top: 40rpx;
		animation: scaleUp 2s infinite;
		/* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.uni-forms-item {
		height: 100rpx;
		margin: 0 29rpx;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;
		width: 692rpx;

		.uni-input-input {
			width: 592rpx;
			margin-left: 50rpx;
		}
	}
}

::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}
:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
</style>
<style>
page {
	height: 100%;
	width: 750rpx;
	margin: 0 auto;
}
</style>
